<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo..</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">


    <child msg="hello world"></child>

    <hr/>

    <child2 my-msg="hello nihao!!!"></child2>

    <hr/>
    <b>动态绑定</b><br/>
    <input v-model="a">
    <child3 :a-msg="a"></child3>

    <!-- 双向绑定 -->
    双向绑定会把子组件的 msg 属性同步回父组件的 parentMsg 属性
    <child :msg.sync="parentMsg"></child>

    <!-- 单次绑定 -->
    <child :msg.once="parentMsg"></child>

</div>


<script type="text/javascript">

    Vue.component('child',{
        props:['msg'],
        template:'<span>{{msg}}</span>'
    })

    Vue.component('child2',{
        props:['myMsg'],
        template:'<span>{{myMsg}}</span>'
    })

    Vue.component('child3',{
        props:['aMsg'],
        template:'<span>{{aMsg}}</span>'
    })



    var vm = new Vue({
        el: "#div_test",
        data: {

        },
        methods: {}
    })





</script>

</body>
</html>